<template>
  <view class="index-container">
    <!-- 轮播 -->
    <view class="banner-content">
      <IndexBanner type="3"></IndexBanner>
    </view>

    <!-- nav -->
    <view class="section_nav">
      <view
        class="text_nav"
        :class="{
          active_nav: currentSectionNav === 0,
        }"
        @click="currentSectionNav = 0"
        >视频教学</view
      >
      <view
        class="text_nav"
        :class="{
          active_nav: currentSectionNav === 1,
        }"
        @click="currentSectionNav = 1"
        >常见问题</view
      >
     
    </view>

    <!-- 视频内容列表 -->
    <view v-if="currentSectionNav === 0" class="class-list-container">
      <view
        v-for="item in classList"
        :key="item.id"
        class="list-item"
        @click="handleVideo(item)"
      >
        <image :src="item.cover_url" mode="scaleToFill" class="image" />
        <view class="class-content">
          <view class="class-title">{{ item.title }}</view>
          <view class="view-num">共有{{ item.view_num }}人在看</view>
        </view>
      </view>
    </view>

    <!-- 文章内容 -->
    <view v-else class="class-list-container">
      <view
        v-for="(item, index) in questionList"
        :key="item.id"
        class="text-list-item"
        @click="handleQuestionItem(index)"
      >
        <view class="title-container">
          <view class="tag">{{ index + 1 }}</view>
          <view class="title">{{ item.title }}</view>
          <view class="arrow-right">
            <u-icon
              v-if="item.active_flag"
              name="arrow-up"
              color="#818c9b"
              size="28"
            ></u-icon>
            <u-icon v-else name="arrow-down" color="#818c9b" size="28"></u-icon>
          </view>
        </view>
        <view
          class="question-content"
          :style="{
            height: item.active_flag ? currentContentHeight : '2rpx',
          }"
        >
          <view class="question-content-box" :id="'list_id_' + index">
            <u-parse :html="item.content"></u-parse>
            <view class="group_up">
              <text style="margin-right: 12rpx">点击收起</text>
              <u-icon name="arrow-up" color="#818c9b" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 视频弹窗 -->
    <u-modal
      v-model="show"
      mode="center"
      :mask-close-able="true"
      :show-title="false"
      :show-confirm-button="false"
      :show-cancel-button="true"
      cancel-text="关闭"
      border-radius="16"
      width="600"
    >
      <view class="popup-content">
        <view class="video-view">
          <video
            :src="currentVideoSrc"
            :poster="currentVideoPoster"
            :webkit-playsinline="true"
            :danmu-btn="false"
            controls
            class="video-guide"
            style="object-fit: contain"
          ></video>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import IndexBanner from "@/components/indexBanner/indexBanner.vue";
import { questionListByBusinessId } from "@/api/applet";
export default {
  components: {
    IndexBanner,
  },
  data() {
    return {
      show: false,
      currentSectionNav: 0,
      classList: [],
      questionList: [],
      currentContentHeight: 1,
      currentVideoSrc: "",
      currentVideoPoster: "",
    };
  },
  onLoad() {
    this.getClassList();
    this.getQuestionList();
  },
  methods: {
    // 获取课程
    getClassList() {
      questionListByBusinessId({
        type: "4",
      }).then((result) => {
        if (result && result.data && result.data.length > 0) {
          let list = result.data;
          this.classList = list;
        }
      });
    },

    // 获取常见问题
    getQuestionList() {
      questionListByBusinessId({
        type: "3",
      }).then((result) => {
        if (result && result.data && result.data.length > 0) {
          let list = result.data;
          list.forEach((item) => {
            item.active_flag = false;
          });
          this.questionList = list;
        }
      });
    },

    // 点击常见问题
    handleQuestionItem(i) {
      // 高度
      const that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#list_id_" + i)
        .boundingClientRect((data) => {
          that.currentContentHeight = data.height * 2 + "rpx";
        })
        .exec();

      this.questionList.forEach((item, index) => {
        if (index === i) {
          item.active_flag = !item.active_flag;
        } else {
          false;
        }
      });
    },

    // 点击观看视频
    handleVideo(item) {
      if (item.content_type === "1") {
        this.currentVideoSrc = item.content;
        this.currentVideoPoster = item.cover_url;
        this.show = true;
      } else {
        uni.navigateTo({
          url: `/pages/customer/noticeDetail?id=${item.id}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}

.index-container {
  padding: 32rpx 0;
  width: 100%;
}

.banner-content {
  margin-bottom: 32rpx;
  padding: 0 32rpx;
}

.section_nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 21px;
  color: #4b4b5c;
  margin-bottom: 10px;
}

.text_nav {
  color: #adb2b9;
  font-size: 15px;
  line-height: 15px;
  margin-right: 32px;
  font-weight: 600;
  position: relative;
}

.active_nav {
  color: #4b4b5c;
}

.active_nav::before {
  content: "";
  background: #56d39d;
  height: 3px;
  width: 16px;
  position: absolute;
  bottom: -10px;
  border-radius: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.class-list-container {
  padding: 32rpx;
}

.list-item {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 12rpx;
  padding-bottom: 24rpx;

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    width: 343px;
    border-bottom: #ebebeb solid 0.5px;
  }
}

.list-item .image {
  width: 200rpx;
  height: 150rpx;
  margin-right: 16rpx;
  border-radius: 12rpx;
}

.class-content {
  flex: 1;
  padding-left: 12rpx;

  .class-title {
    height: 110rpx;
    color: #4b4b5c;
  }

  .view-num {
    font-size: 24rpx;
    color: #949ab1;
  }
}

.text-list-item {
  margin-bottom: 12rpx;
  padding-bottom: 24rpx;

  .title-container {
    display: flex;
    align-items: center;
    position: relative;
    .tag {
      width: 48rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background-color: $uni-color-primary;
      color: #fff;
      border-radius: 12rpx;
    }

    .title {
      flex: 1;
      padding-left: 24rpx;
    }
  }

  .question-content {
    flex-direction: column;
    background-color: #f5f5f5;
    border-radius: 4rpx;
    transition: 0.25s;
    border-radius: 24rpx;
    margin-top: 32rpx;
    overflow: hidden;
  }

  .question-content-box {
    padding: 24rpx;
  }

  .group_up {
    display: flex;
    justify-content: flex-end;
    margin-top: 55px;
    padding: 0 14px;
    padding-bottom: 14px;
    color: #4b4b5c;
    font-size: 24rpx;
  }
}

.popup-content {
  padding: 24rpx;
}

.video-view {
  width: 100%;
  border-radius: 16px;
  min-height: 1020rpx;
  background: #000;
  overflow: hidden;
  padding: 0 16px;
  position: relative;

  .video-guide {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.close-circle {
  padding-top: 24rpx;
}
</style>
